<template>
	<view class="topbar flex-between" :style="[style]">
		<view class="left flex" @click="handleBack">
			<m-icon  v-if="goBack" wh="38" :color="color" type="icon-fanhui" spa="0 10 0 0"></m-icon>
			<!-- #ifdef MP-WEIXIN -->
			<text>{{title}}</text>
			<!-- #endif -->
			<slot name="back"></slot>
		</view>
		<view class="title" :style="{'color':color}">
			<!-- #ifndef MP-WEIXIN -->
			<text>{{title}}</text>
			<!-- #endif -->
			<slot name="title"></slot>
		</view>
		<view class="right" :style="{'right':menuButton + 'rpx'}">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: "topbar",
		props: {
			title:  '',
			goBack: {
				type: Boolean,
				default: true,
			},
			shouldBack: {
				type: Boolean,
				default: true,
			},
			color:'',
			goHome: {
				type: Boolean,
				default: false,
			},
		},
		computed: {
			...mapState({
				menuButton: state => state.general.menuButton
			}),
			
			style() {
				return {
					color: this.color,
				}
			}
		},
		data() {
			return {

			};
		},
		methods: {
			Home() {
				this.Jump({
					url: '/pages/home/home',
					mode: 4
				})
			},
			handleBack() {
				this.$emit('back')
				if (this.goBack && this.shouldBack) {
					this.Jump()
				}
			}
		}
	}
</script>

<style lang="scss">
	.topbar {
		padding: 28rpx 24rpx;
		position: relative;
		color: var(--text);
		height: 44px;
		box-sizing: border-box;
		// border-bottom: 1rpx solid var(--border);

		.back {
			width: 36rpx;
			height: 32rpx;
			vertical-align: top;
		}

		.left {
			position: absolute;
			z-index: 9;
			height: 100%;
			left: 0;
			top: 0;
			align-items: center;
			width: 80%;
			padding-left: 24rpx;
			font-weight: 700;
			.goHome {
				display: inline-flex;
				position: relative;
				border: 1rpx solid var(--border);
				border-radius: 40rpx;
				padding: 10rpx 20rpx 10rpx 15rpx;

				text {
					padding: 0 15rpx;
					color: #EEEEEE;
				}
			}
		}

		.right {
			position: absolute;
			z-index: 9;
			height: 100%;
			right:  0;
			top: 0;
			margin-right: 24rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.title {
			font-weight: bold;
			position: absolute;
			z-index: 1;
			left: 50%;
			top: 50%;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			transform: translate(-50%, -50%);
		}
		.wx-title{
			flex: 1;
			font-weight: 400;
			font-size: 32rpx;
			text-align: left;
		}
	}
</style>